<template>
    <view class="detail">
    	<SRV-topbar title="会员等级" :isLeft="true"></SRV-topbar>
    	<view class="head" >
            <swiper v-if="levelList.length > 1" class="swiper-box" @change="change" previous-margin="40rpx" next-margin="100rpx" :current="nowLevel" style="height: 280rpx;">
            	<swiper-item v-for="(item, index) in levelList" :key="index">
                    <view class="userInfo">
                        <view class="title">
                            <view>{{item.levelName}}</view>
                            <view>{{no}}</view>
                        </view>
                        <view class="content">
                            <view class="remark">
                                <view style="margin-top: 10rpx;">{{item.statusName}}</view>
                                <view v-if="item.level == userLevel && teamInfo.state" class="payBtn" @click="showTeamCode()">团队邀请码</view>
                                <view v-if="item.isPay" class="payBtn" @click="upgradeFun(item)">{{item.payTitle}}</view>
                            </view>
                            <image :src="item.levelIcon" mode="aspectFill"></image>
                        </view>
                    </view>
            	</swiper-item>
            </swiper>
            <view class="userInfo" v-if="levelList.length == 1">
                <view class="title">
                    <view>{{levelList[0].levelName}}</view>
                    <view>{{no}}</view>
                </view>
                <view class="content">
                    <view class="remark">
                        <view style="margin-top: 10rpx;">{{levelList[0].statusName}}</view>
                        <view v-if="levelList[0].isPay" class="payBtn" @click="jump('appoint_view', '/pages/my/levelApply')">{{levelList[0].payTitle}}</view>
                    </view>
                    <image :src="levelList[0].levelIcon" mode="aspectFill"></image>
                </view>
            </view>
    	</view>
        <view class="ruleItem">
            <view class="ruleTitle">
                <view class="line"></view>
                <view class="title">{{nowRule.title}} 权益</view>
                <view class="line"></view>
            </view>
            <view class="ruleInfo" v-html="nowRule.content"></view>
        </view>
        <view :style="'height:' + bottomHeight + 'rpx;'" class="bottom" v-if="businessInfo.state" @click="showCode()">
            {{businessInfo.title}}
        </view>
        <uni-popup ref="popup" type="bottom">
        	<view class="pay_type">
        		<image @click="close" class="close" :src="'https://hdsq.aoorange.cn/attachment/xcx/icon/close1.png'" mode="aspectFill"></image>
        		<view class="title">选择支付方式</view>
        		<view class="paypir">
        		    <text>应付金额</text>
        		    <text>￥{{payInfo.pay_money}}</text>
        		</view>
        		<view class="line2" v-if="payInfo.pay_money > 0" @click="selPayType(5)">
        		    <text>余额支付 - 当前余额：{{payInfo.user_money}}</text>
        		    <view :class="payData.payment_type == 5 ?'sel':'nosel'" v-if="Number(payInfo.user_money) >= Number(payInfo.pay_money)"></view>
        		    <text v-else @click="jump('online_recharge')">余额不足</text>
        		</view>
        		<view class="line2" v-if="payInfo.pay_money > 0" @click="selPayType(1)">
        		    <text>在线微信支付</text>
        		    <view :class="payData.payment_type == 1 ?'sel':'nosel'"></view>
        		</view>
        		<view :style="'height:' + bottomHeight + 'rpx;'" class="pay_bot" @click="subPay()">确认支付</view>
        	</view>
        </uni-popup>
        <uni-popup ref="generateCode">
            <view class="show pickupCode-box">
                <view class="title">设置店铺邀请码</view>
                <view class="lineTitle">折扣：</view>
                <view class="levelList">
                    <view class="levelItem" v-for="(item, index) in gearList" :key="index" @click="selCodeParam('gear', index)">
                        <view :class="nowGear == index ?'sel':'nosel'"></view>
                        <text>{{item.name}}</text>
                    </view>
                </view>
                <view class="lineTitle">加点：</view>
                <view class="levelList">
                    <view class="levelItem" v-for="(item, index) in littleList" :key="index" @click="selCodeParam('little', index)">
                        <view :class="nowLittle == index ?'sel':'nosel'"></view>
                        <text>{{item.name}}</text>
                    </view>
                </view>
                <view class="btn" @click="generateCode()">
                    <view>确认</view>
                </view>
            </view>
        </uni-popup>
        <uni-popup ref="pickupCode">
            <view class="show pickupCode-box">
                <view class="title">{{codeInfo.title}}</view>
                <image class="img" :src="codeInfo.imgUrl"></image>
                <view class="pickupCode-t">{{codeInfo.code}}</view>
                <view class="btn" @click="close()">
                    <text>确认</text>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
    var _self;
    import serve from '../../static/request.js';
    import commonPay from '../../static/commonPay.js';
    import common from '../../static/jump.js';
    import uniQrcode from '../../static/wxqrcode.js';
    export default {
    	data() {
    		return {
                levelList: [],
                no: '',
                userLevel: 0,
                nowLevel: 0,
                ruleList: [],
                businessInfo: {
                    state: false,
                },
                teamInfo: {
                    state: false,
                },
                payInfo: {
                    pay_money: 0,
                    user_money: 0,
                },
                payData: {
                    appkey: uni.getStorageSync('appkey'),
                    'access-token': uni.getStorageSync('access-token'),
                    pay_type: '',
                    pay_id: 0,
                    is_use_hdq: 0,
                    is_use_judge: 0,
                    payment_type: 1,
                    jumpFile: '',
                },
                nowRule: {
                    title: '金卡 V1',
                    content: ''
                },
                codeInfo: {
                    title: '',
                    code: '',
                    imgUrl: '',
                },
                nowGear: 0,
                gearList: [],
                nowLittle: 0,
                littleList: [],
                bottomHeight: 110,
            }
        },
        methods: {
            getLevelInfo() {
                uni.showLoading({
                    title: '加载中···',
                    mask: true
                });
                serve.request({
                    url: '/member/member/level-view',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                    },
                    v: '/v3',
                }).then(res => {
                    uni.hideLoading();
                    if (res.code == 200) {
                        _self.levelList = res.data.levelList;
                        _self.ruleList = res.data.ruleList;
                        _self.nowLevel = res.data.userLevel;
                        _self.no = res.data.no;
                        _self.userLevel = res.data.userLevel;
                        _self.nowRule = _self.ruleList[_self.userLevel];
                        _self.payInfo.user_money = res.data.userMoney;
                    } else {
                        uni.showToast({
                            title: res.message,
                            icon: 'none',
                        });
                        if (res.code == 199) {
                            _self.jump('login');
                            return;
                        }
                    }
                    _self.$forceUpdate();
                });
            },
            getGearList() {
                serve.request({
                    url: '/merchant/apply/gear-list',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                    },
                    v: '/v3',
                }).then(res => {
                    _self.gearList = res.data.gearList;
                    _self.littleList = res.data.littleList;
                    _self.businessInfo = res.data.businessInfo;
                    _self.teamInfo = res.data.teamInfo;
                });
            },
            upgradeFun(item) {
                if(item.level == 1) {
                    common.jump('appoint_view', '/pages/my/levelApply');
                    return ;
                }
                _self.payInfo.pay_money = item.payMoney;
                _self.payData.pay_type = item.payType;
                _self.$refs.popup.open();
            },
			selPayType(payType) {
				if (payType == 5 && Number(_self.payInfo.user_money) < Number(_self.payInfo.pay_money)) {
					return;
				}
				_self.payData.payment_type = payType;
			},
            subPay() {
                commonPay.payFun(_self.payData, _self, 2);
            },
			callbackFun() {
				_self.$refs.popup.close();
				_self.getLevelInfo();
			},
            showCode() {
                _self.$refs.generateCode.open();
            },
            showTeamCode() {
                _self.codeInfo.title = _self.teamInfo.title;
                _self.codeInfo.code = _self.teamInfo.code;
                _self.codeInfo.imgUrl = uniQrcode.createQrCodeImg(_self.teamInfo.codeUrl, {
                    size: parseInt(100) 
                });
                console.info(_self.codeInfo);
                _self.$forceUpdate();
                _self.$refs.pickupCode.open();
            },
            selCodeParam(type, k) {
                if(type == 'gear') {
                    _self.nowGear = k;
                } else {
                    _self.nowLittle = k;
                }
            },
            generateCode() {
                var gearRatio = _self.gearList[_self.nowGear].ratio;
                var littleRatio = _self.littleList[_self.nowLittle].ratio;
                var codeUrl = _self.businessInfo.codeUrl+"_"+gearRatio+littleRatio;
                _self.codeInfo.title = _self.businessInfo.title;
                _self.codeInfo.code = _self.businessInfo.code;
                _self.codeInfo.imgUrl = uniQrcode.createQrCodeImg(codeUrl, {
                    typeNumber: 7,
                    size: parseInt(100) 
                });
                console.info(_self.codeInfo);
                _self.$refs.generateCode.close();
                _self.$refs.generateCode.close();
                _self.$refs.pickupCode.open();
            },
            close() {
                _self.$refs.pickupCode.close();
                _self.$refs.popup.close();
            },
            change(e) {
                _self.nowLevel = e.detail.current;
                _self.nowRule = _self.ruleList[_self.nowLevel];
            },
            
            jump(jump_type, jump_link){
            	common.jump(jump_type, jump_link);
            }
        },
        onLoad() {
            _self = this;
			if(uni.getSystemInfoSync().safeAreaInsets.top > 20){
				_self.bottomHeight = 150;
			}
            _self.getLevelInfo();
            _self.getGearList();
        },
    }
</script>

<style lang="scss" scoped>
    .detail {
    	width: 100%;
    	padding-bottom: 140rpx;
    	color: rgba(102, 102, 102, 1);
    }
    .scroll {
    	width: 100%;
    	padding: 20rpx;
    	white-space: nowrap;
    }
    .scroll-item {
        display: inline-flex;
        height: 300rpx;
        font-size: 28upx;
        border: 1rpx solid;
        border-radius: 20rpx;
        width: 80%;
    }
    .bottom {
    	width: 100%;
    	height: 100rpx;
    	line-height: 100rpx;
    	text-align: center;
    	font-size: 32rpx;
    	color: rgba(255, 255, 255, 1);
    	background: rgba(251, 202, 63, 1);
    	bottom: 0rpx;
    	position: fixed;
    }
    .pickupCode-box {
        width: 80vw;
        background: #fff;
        border-radius: 8rpx;
    
        .title {
            width: 100%;
            text-align: center;
            color: #333333;
            height: 100rpx;
            line-height: 100rpx;
            font-size: 36rpx;
        }
    
        .img {
            width: 480rpx;
            height: 48rrpx;
            position: relative;
            left: 50%;
            margin-left: -240rpx
        }
    
        .pickupCode-t {
            width: 100%;
            text-align: center;
            height: 60rpx;
            line-height: 60rpx;
            letter-spacing: 8rpx;
            font-size: 40rpx;
        }
    
        .btn {
            width: 100%;
            height: 100rpx;
            text-align: center;
            line-height: 100rpx;
            font-size: 32rpx;
            color: #333333;
        }
        .lineTitle {
                border-top: 1px solid #eeeeee;
                padding-top: 15rpx;
                padding-left: 20rpx;
        }
        .levelList {
            display: flex;
            margin-bottom: 20rpx;
            .levelItem {
                display: flex;
                width: 30%;
                padding: 10rpx;
            }
        }
    }
    .userInfo {
        border-radius: 20rpx;
        height: 90%;
        margin: 10rpx 10rpx;
        width: calc(100%-10rpx);
        padding: 10rpx 6rpx;
        border: 2rpx #e4e7ec solid;
        background-color: #e4e7ec;
        .title {
            display: flex;
            width: 96%;
            align-content: center;
            justify-content: space-between;
            padding: 0 10rpx;
            font-size: 36rpx;
        }
        .content {
            display: flex;
            justify-content: space-between;
            padding: 10rpx;
            .remark {
                width: 65%;
                padding: 20prx;
            }
            .payBtn {
                border: 1px solid #ffd900;
                background: #ffd900;
                border-radius: 20rpx;
                padding: 10rpx;
                letter-spacing: 4rpx;
                margin-top: 20rpx;
                width: 50%;
                text-align: center;
                margin-left: 20%;
            }
            image{
                width: 180rpx;
                height: 180rpx;
                margin-right: 10rpx;
            }
        }
    }
    .ruleItem {
        padding: 20rpx;
        .ruleTitle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .title {
                text-align: center;
                padding: 10rpx;
                font-size: 36rpx;
            }
            .line {
                display: inline-block;
                width: 30%;
                border-top: 1px solid #ccc ;
            }
        }
        
    }
    
    .pay_type{
    	position: relative;
    	width: 100%;
    	background: #FFFFFF;
    	padding-bottom: 140upx;
    	.close{
    		position: absolute;
    		width:23upx;
    		height:23upx;
    		right: 40upx;
    		top: 45upx;
    	}
    	.title{
    		width: 100%;
    		text-align: center;
    		height: 100upx;
    		line-height: 100upx;
    		font-size: 36upx;
    		border-bottom: 1upx #EBECF0 solid;
    	}
    	.paypir{
    		display: flex;
    		justify-content: center;
    		flex-direction: column;
    		align-items: center;
    		padding: 50upx 0upx 20upx;
    		font-size: 28upx;
    		color: #FF5F60;
    		text:last-child{
    			color: #FF5F60;
    			font-size: 40upx;
    			font-weight: bold;
    			margin-top: 10upx;
    		}
    	}
    	.line2{
    		width: 100%;
    		box-sizing: border-box;
    		padding: 36upx;
    		display: flex;
    		justify-content: space-between;
    		font-size: 28upx;
    		color: #333333;
    		border-bottom: 1upx #EBECF0 solid;
    		.txt{
    			color: #999999;
    		}
    	}
    	.pay_bot {
    	  width: 100%;
    	  position: fixed;
    	  left: 0;
    	  bottom: 0;
    	  height: 100upx;
    	  background: #FFBC00;
    	  color: #fff;
    	  font-size: 32upx;
    	  line-height: 100upx;
    	  text-align: center;
    	  border-radius: 0;
    	  &::after{
    		  border: none;
    	  }
    	}
    }
    .nosel {
    	width: 36upx;
    	height: 36upx;
    	border: 1upx solid rgba(60, 72, 104, 1);
    	border-radius: 50%;    
        margin-right: 20rpx;
    }
    .sel {
    	background-image: url(../../static/img/check.png);
    	background-repeat: no-repeat;
    	width: 40upx;
    	height: 40upx;
    	background-size: 100%;    
        margin-right: 20rpx;
    }
    .nocheck {
    	width: 36upx;
    	height: 36upx;
    	border: 1upx solid rgba(60, 72, 104, 1);
    	border-radius: 20%;
    }
    .check {
    	background: url(../../static/img/checkbox_check.png);
    	background-repeat: no-repeat;
    	width: 40upx;
    	height: 40upx;
    	background-size: 100%;
    }
</style>